{extend name="base"/}
{block name="title"}
<title>妙百睿国际幼儿园-{$map_name}</title>
{/block}

<!--轮播开始-->
{block name="content"}
<div class="g-hert">
    <div class="container">
        <div class="row">
            <div class=" xuxian">
                <p class="x-left pull-left">{$map_name} <span class="smalll"></span></p>
                <p class="x-right pull-right">首页&nbsp;{$map}</p>
            </div>
            <div class="col-md-12 x-b ">
                <img class="hidden-xs" style="width: 100%" src="{$data.img_url1}" alt="">
                <img class="visible-xs" style="width: 100%" src="{$data.img_url6}" alt="">
            </div>
            <div class="col-md-12 x-c ">
                <div class="x-c-t">{$data.title1}</div>
                <div class="x-c-c row">
                    <div class="x-c-c-t col-md-6" >
                    <?php echo str_replace("\r\n",'<br>', $data['content1']);?>
                    </div>
                    <div class="col-md-6">
                        <img style="width: 100%" src="{$data.img_url2}" alt="">
                    </div>
                </div>
            </div>
            <div class="col-md-12 x-c">
                <div class="x-c-t">
                    {$data.title2}
                </div>
                <div class="x-c-c row">
                    <div class="x-c-c-t col-md-6">
                        <?php echo str_replace("\r\n",'<br>', $data['content2']);?>
                    </div>
                     <div class="col-md-6">
                         <img style="width: 100%" src="{$data.img_url3}" alt="">
                     </div>
                </div>
            </div>

        </div>
    </div>
</div>

<style>
    .s-lslunbo{position: relative;max-width: 1200px;margin-top: -40px;;margin-bottom: 20px}
    .swiper-container{padding: 220px 0;margin: 0 10%;}
    .swiper-button-prev{background-image: url(__HTML__/img/s-left.png);background-size: 100%;}
    .swiper-button-next{background-image: url(__HTML__/img/s-right.png);background-size: 100%;}
    .swiper-slide{background-color: #828282;height: 2px;position: relative;}
    .swiper-wrapper .swiper-slide_1 .s-lishi{bottom: 46px;top: auto;}
    .s-dian{width: 15px;height: 15px;margin-left: calc(50% - 7.5px);background-color: #828282;margin-top: -6.5px;border-radius: 50%;}
    .s-lishi{position: absolute;width: 100%;top: 46px;}
    .s-year, .s-year-t{background-color: #828282;text-align: center;color: white;line-height: 40px;font-size: 15px;position: relative;background: #616161;}
    .s-year:after, .s-year:before, .s-year-t:after, .s-year-t:before {left: 50%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;}
    .s-year:after, .s-year:before{bottom: 100%;}
    .s-year-t:after, .s-year-t:before {top: 100%;}
    .s-year:after {border-color: rgba(48, 213, 43, 0);border-bottom-color: #616161;border-width: 22px 13px;margin-left: -13px;}
    .s-year:before {border-color: rgba(105, 54, 245, 0);border-bottom-color: #616161;border-width: 22px 13px;margin-left: -13px;}
    .s-year-t:after {border-color: rgba(136, 183, 213, 0);border-top-color: #616161;border-width: 22px 13px;margin-left: -13px;}
    .s-year-t:before {border-color: rgba(194, 225, 245, 0);border-top-color: #616161;border-width: 22px 13px;margin-left: -13px;}
    .swiper-slide-active .s-year, .swiper-slide-active .s-year-t, .swiper-slide-active .s-dian, .h .s-year, .h .s-year-t, .h .s-dian{background: #834c92;}
    .swiper-slide-active .s-year:after, .swiper-slide-active .s-year:before, .h .s-year:after, .h .s-year:before{border-bottom-color: #834c92;}
    .swiper-slide-active .s-year-t:after, .swiper-slide-active .s-year-t:before, .h .s-year-t:after, .h .s-year-t:before{border-top-color: #834c92;}
    .s-lishi p{border: 1px solid #dbdbdb;padding: 10px;margin: 0;}
    @media screen and (max-width: 767px) {
        .swiper-container{
            padding: 320px 0;
            margin: 0 10%;
            padding-bottom: 220px;
        }
        .swiper-button-prev{display: none}
        .swiper-button-next{display: none}
    }
</style>
<div class="s-lslunbo">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <?php $arr=array_merge(array_filter(explode("\r\n", $data['time1'])));?>
            <?php for ($i = 1; $i<= count($arr); $i++) { if ($i % 4 == 0) { ?>
            <div class="swiper-slide swiper-slide_1 ">
                <div class="s-dian"></div>
                <div class="s-lishi">
                    <p><?php echo $arr[$i-1];?></p>
                    <div class="s-year-t">
                        <?php echo $arr[$i-2];?>
                    </div>
                </div>
            </div>
            <?php continue;} if ($i % 2 == 0) { ?>
            <div class="swiper-slide">
                <div class="s-dian"></div>
                <div class="s-lishi">
                    <div class="s-year">
                        <?php echo $arr[$i-2];?>
                    </div>
                    <p><?php echo $arr[$i-1];?></p>
                </div>
            </div>
            <?php }}?>

        </div>
    </div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<div class="g-hert">
    <div class="container">
        <div class="row">
            <div class="col-md-12 row x-c">
                <div class="x-c-t">
                    环球教育集团规模
                </div>
                <div class="x-c-c">
                    <p class="x-c-c-t">
                        <img class="hidden-xs" width="100%" src="__HTML__/img/mmap.jpg" alt="">
                        <img class="visible-xs" width="100%" src="__HTML__/img/mmapm.jpg" alt="">
                    </p>
                </div>
                </div>
            </div>
        </div>
    </div>
{/block}